<template>
  <jdLayout v-if="isShowContent"> </jdLayout>
  <!-- <div class="container" ref="ref">
    <div class="container-main" :style="style" v-if="isShow">
      <jdLayout />
    </div>
  </div> -->
</template>

<script>
import jdLayout from "./components/layout";
import myTest from "./components/test";
import request from "@/utils/request";
import Qs from "qs";
import { mapMutations, mapState } from "vuex";

export default {
  components: {
    jdLayout,
    myTest,
  },
  data() {
    return {
      style: {},
      variable: {},
      isShow: false,
      isShowContent:false,
    };
  },
  computed: {
    ...mapState("reportFormDark", ["deptId"]),
  },
  watch:{
    deptId(){
      this.getProjectInfoByDeptId()
    },
  },
  async created() {
    await this.screenRegion(); // 获取地图地区列表
  },
  mounted() {
    // const width = this.$refs.ref.scrollWidth;
    // const height = this.$refs.ref.scrollHeight;
    // let acW = 0;
    // let acH = 0;
    // // console.log(width, height);
    // if (width * 9 < height * 16) {
    //   acW = width;
    //   acH = (width * 9) / 16;
    // }
    // if (width * 9 > height * 16) {
    //   acW = (height * 16) / 9;
    //   acH = height;
    // }
    // // console.log(acW, acH);
    // this.style = {
    //   width: `${acW}px`,
    //   height: `${acH}px`,
    //   "--width": `${acW}px`,
    //   "--height": `${acH}px`,
    // };
    // this.$nextTick(()=>{
    //   this.isShow=true
    // })
  },
  methods: {
    ...mapMutations("reportFormDark", ["setState"]),
    screenRegion() {
      //获取地图地区列表
      request({
        url: "/system/screen/region",
        method: "post",
      }).then((res) => {
        this.deptList = res.data;
        this.setState({
          deptList: res.data,
        });
        if (res.data && res.data.length > 0) {
          //默认取第一个
          this.setState({
            deptId: res.data[0].deptId,
          });
        }
        this.getProjectInfoByDeptId();
      });
    },
    getProjectInfoByDeptId() {
      // this.isShowContent=false
      //获取项目列表
      request({
        url: "/system/screen/getProjectInfoByDeptId",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.deptId,
        }),
      }).then((res) => {
        this.projectList = res.data;
        this.setState({
          projectList: res.data,
        });
        if (res.data && res.data.length > 0) {
          //默认取第一个
           
          this.setState({
            projectId: res.data[0].deptId,
          });
        }
        this.isShowContent=true
      });
    },
  },
};
</script>

<style scoped lang="scss">
// .container {
//   width: 100%;
//   height: calc(100vh - 84px);
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   background: #000;

//   .container-main {
//     background: cadetblue;
//     font-size: 12px;
//     display: flex;
//   }
// }
</style>